import React, { Component } from 'react';
import { connect } from 'react-redux';
import './brandIntroduction_tab.scss';
import { setBrandIntroductionTab } from '../../../store/brandIntroduction/action';

class BrandIntroductionTab extends Component {

    onTab = (event) => {
        let TabName = event.target.innerHTML;
        const { dispatch } = this.props;
        this.removeAll(event, 'active');
        switch (TabName) {
            case '品牌简介':
                dispatch(setBrandIntroductionTab(1));
                this.addClass(event.target, 'active');
                break;
            case '品牌历程':
                dispatch(setBrandIntroductionTab(2));
                this.addClass(event.target, 'active');
                break;
            case '超级工厂':
                dispatch(setBrandIntroductionTab(3));
                this.addClass(event.target, 'active');
                break;
            case '品牌荣誉':
                dispatch(setBrandIntroductionTab(4));
                this.addClass(event.target, 'active');
                break;
            case '招商信息':
                dispatch(setBrandIntroductionTab(5));
                this.addClass(event.target, 'active');
                break;
            default:
                break;
        }
    }

    addClass = (obj, cls) => {
        if (!this.hasClass(obj, cls)) {
            obj.className += " " + cls;
        }
    }

    hasClass = (obj, cls) => {
        return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }

    removeClass = (obj, cls) => {
        if (this.hasClass(obj, cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            obj.className = obj.className.replace(reg, ' ');
        }
    }

    removeAll = (obj, cls) => {
        let Allobj = obj.target.parentNode.childNodes;
        for (let i = 0; i < Allobj.length; i++) {
            this.removeClass(Allobj[i], cls);
        }
    }

    render() {
        return (
            <ul className="brandIntroduction_tab" onClick={this.onTab}>
                <li className="active">品牌简介</li>
                <li>品牌历程</li>
                <li>超级工厂</li>
                <li>品牌荣誉</li>
                <li>招商信息</li>
            </ul>
        )
    }
}

export default connect()(BrandIntroductionTab);